리액트를 다루는 기술 리액트를 다루는 기술 ( Hooks ) Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다, 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미... 리액트를 다루는 기술ReactReact 리액트를 다루는 기술 ( Context API ) Context API : 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 하지만 Context API를 통하여 글로벌 상태 관리를 편하게 할 수 있다. 더 이상 여러 컴포넌트를 거쳐서 값을 전달해주는 것이 아니라, Context를 통해 원하는 값이나 함수를 바로 값을 받아와 사용할 수 있다. src/contexts/color.js src/components/ColorBox... React리액트를 다루는 기술React 2.4장. JSX문법 💡 react 환경을 시작하고 싶다면 vscode 맨 끄트머리를 당겨보면 터미널이 나오는데 경로를 react 폴더로 넣고 npm start를 하면 된다. 이러한 코드는 다음과 같이 코드를 수정해 주어야 한다. 그 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙때문이다. JSX안에서는 ... React리액트를 다루는 기술리액트React 3.5 state를 사용할 때 주의 사항 state 값을 바꿔야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용 해야한다. 배열이나 객체를 업데이트 할 때는 사본을 만든 뒤 그 사본에 값을 업데이트한 후 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 해야한다. 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 부모 컴포넌트의 state를 자식 컴포넌트의 pr... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 ) 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 액션 생성 함수(action creator) : 액션 객체를 만들어 주는 함수 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 리듀서(reducer) : 변화를 일으키는... React리액트를 다루는 기술React 4.2 예제로 이벤트 핸들링 익히기 EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange 이벤트 설정하는 코드 작성하고 EventPractice 컴포넌트의 render 메서드에 작성하자 💡 EventPractice.js의 onChange 설정 부분 다시 보기 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 예를 들어, 0.5... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리액트 시작 ) ※ 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있다. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있나면, 리액트 컴포넌트가 최초로 샐행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 ... React리액트를 다루는 기술React 3.4 state state: 컴포넌트 내부에서 바뀔 수 있는 값 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔야 값이 변경되지만 전달받은 name 값을 직접 바꿀 수 없다. 💡 컴포넌트 state 이 constructor는 컴포넌트의 생성자 메서드이며 constructor를 작성할 때는 super(props)를 꼭 호출해야하고 이 함수가 호출되면 현재 상속받고 있는 리액트의 Comp... React리액트를 다루는 기술리액트React [리액트를 다루는 기술] 3장 컴포넌트 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. MyComponent의 props 값을 요렇게 지정할 수 있다. 요렇게 const {ㅇ, ㅅ } = props 처럼 작성해주면 더 짧은 코드로 사용할 수 있으며, 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 요렇게 props를 사용할 때 파라... 리액트를 다루는 기술ReactReact [리액트를 다루는 기술] 4장 이벤트 핸들링 HTML에서 이벤트를 설정할 때는 큰 따옴표안에 실행할 코드를 넣었지만 리액트에서는 함수 형태 객체를 전달한다. 3) DOM 요소에만 이벤트를 설정할 수 있다 즉 dic, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수 없다. 네이... 리액트를 다루는 기술ReactReact ToDoList Web(3) 👍 프로젝트 최적화 방법 -> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다. 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨. 작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필요한 리렌더링을 막아야 함. 여기서 불필요한 리렌더링은 실제 유저에서의 DOM 렌더링X, Virtual DOM에서의 렌더링을... project리액트를 다루는 기술ReactReact ToDoList Web(2) (1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다. 상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다. state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용. this.props, this를 참조하지 않아도 됨. 🎁 TodoList map함수 활용 App.js에 TodoList로 todos 넘겨준 뒤, map이용하여 배치. 🎁 데이터 추가하기 App.js getId(... project리액트를 다루는 기술ReactReact
리액트를 다루는 기술 ( Hooks ) Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다, 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미... 리액트를 다루는 기술ReactReact 리액트를 다루는 기술 ( Context API ) Context API : 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 하지만 Context API를 통하여 글로벌 상태 관리를 편하게 할 수 있다. 더 이상 여러 컴포넌트를 거쳐서 값을 전달해주는 것이 아니라, Context를 통해 원하는 값이나 함수를 바로 값을 받아와 사용할 수 있다. src/contexts/color.js src/components/ColorBox... React리액트를 다루는 기술React 2.4장. JSX문법 💡 react 환경을 시작하고 싶다면 vscode 맨 끄트머리를 당겨보면 터미널이 나오는데 경로를 react 폴더로 넣고 npm start를 하면 된다. 이러한 코드는 다음과 같이 코드를 수정해 주어야 한다. 그 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙때문이다. JSX안에서는 ... React리액트를 다루는 기술리액트React 3.5 state를 사용할 때 주의 사항 state 값을 바꿔야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용 해야한다. 배열이나 객체를 업데이트 할 때는 사본을 만든 뒤 그 사본에 값을 업데이트한 후 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 해야한다. 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 부모 컴포넌트의 state를 자식 컴포넌트의 pr... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 ) 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능 액션 생성 함수(action creator) : 액션 객체를 만들어 주는 함수 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 리듀서(reducer) : 변화를 일으키는... React리액트를 다루는 기술React 4.2 예제로 이벤트 핸들링 익히기 EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange 이벤트 설정하는 코드 작성하고 EventPractice 컴포넌트의 render 메서드에 작성하자 💡 EventPractice.js의 onChange 설정 부분 다시 보기 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 예를 들어, 0.5... React리액트를 다루는 기술리액트React 리액트를 다루는 기술 ( 리액트 시작 ) ※ 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있다. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있나면, 리액트 컴포넌트가 최초로 샐행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 ... React리액트를 다루는 기술React 3.4 state state: 컴포넌트 내부에서 바뀔 수 있는 값 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔야 값이 변경되지만 전달받은 name 값을 직접 바꿀 수 없다. 💡 컴포넌트 state 이 constructor는 컴포넌트의 생성자 메서드이며 constructor를 작성할 때는 super(props)를 꼭 호출해야하고 이 함수가 호출되면 현재 상속받고 있는 리액트의 Comp... React리액트를 다루는 기술리액트React [리액트를 다루는 기술] 3장 컴포넌트 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. MyComponent의 props 값을 요렇게 지정할 수 있다. 요렇게 const {ㅇ, ㅅ } = props 처럼 작성해주면 더 짧은 코드로 사용할 수 있으며, 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 요렇게 props를 사용할 때 파라... 리액트를 다루는 기술ReactReact [리액트를 다루는 기술] 4장 이벤트 핸들링 HTML에서 이벤트를 설정할 때는 큰 따옴표안에 실행할 코드를 넣었지만 리액트에서는 함수 형태 객체를 전달한다. 3) DOM 요소에만 이벤트를 설정할 수 있다 즉 dic, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수 없다. 네이... 리액트를 다루는 기술ReactReact ToDoList Web(3) 👍 프로젝트 최적화 방법 -> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다. 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨. 작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필요한 리렌더링을 막아야 함. 여기서 불필요한 리렌더링은 실제 유저에서의 DOM 렌더링X, Virtual DOM에서의 렌더링을... project리액트를 다루는 기술ReactReact ToDoList Web(2) (1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다. 상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다. state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용. this.props, this를 참조하지 않아도 됨. 🎁 TodoList map함수 활용 App.js에 TodoList로 todos 넘겨준 뒤, map이용하여 배치. 🎁 데이터 추가하기 App.js getId(... project리액트를 다루는 기술ReactReact